<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>App Control</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
</head>
<body>

<div class="layui-container">
    <table id="appTable" lay-filter="appTable" class="layui-table"></table>
    <script type="text/html" id="demo-toolbar-setRowChecked">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
            <button class="layui-btn layui-btn-sm" lay-event="delete">批量删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="startSelected">批量启动</button>
            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="stopSelected">批量停止</button>
        </div>
    </script>

</div>

<!-- 新增弹窗的HTML代码 -->
<script type="text/html" id="addPopup">
    <form class="layui-form layui-form-pane" lay-filter="addForm" >
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="userName" required lay-verify="required" placeholder="服务器-用户名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" name="password" required lay-verify="required" placeholder="服务器-密码"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">端口</label>
            <div class="layui-input-block">
                <input type="number" name="port" required lay-verify="required" placeholder="请输入端口号"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主机地址</label>
            <div class="layui-input-block">
                <input type="text" name="host" required lay-verify="required" placeholder="请输入主机"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">应用名称</label>
            <div class="layui-input-block">
                <input type="text" name="appName" required lay-verify="required" placeholder="请输入应用名称"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">启动文件</label>
            <div class="layui-input-block">
                <input type="text" name="startFile" required lay-verify="required" placeholder="请输入启动文件路径"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">停止文件</label>
            <div class="layui-input-block">
                <input type="text" name="stopFile" required lay-verify="required" placeholder="请输入停止文件路径"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">应用端口</label>
            <div class="layui-input-block">
                <input type="number" name="appPort" required lay-verify="required" placeholder="请输入应用端口"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addSubmit">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script th:inline=none>
    layui.use(['table', 'layer', 'form'], function() {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        // 定义开关状态的列模板
        var statusTpl = function(d) {
            if (d.status === '开') {
                return '<span class="layui-badge-dot layui-bg-green"></span> 开';
            } else {
                return '<span class="layui-badge-dot layui-bg-red"></span> 关';
            }
        };

        // 渲染表格
        var appTable = table.render({
            elem: '#appTable',
            url: '/chat/list', // 请求接口地址
            toolbar: '#demo-toolbar-setRowChecked', // 工具栏
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field:'id', fixed: 'left', title: 'ID', sort: true},
                {field:'userName', title: '服务器-用户名'},
                {field:'host',  title: '服务器-IP'},
                {field:'port',  title: '服务器-ssh端口'},
                {field:'appName',  title: '应用名称'},
                {field:'startFile',  title: '启动脚本'},
                {field:'stopFile',  title: '停止脚本'},
                {field:'appPort',  title: '端口'},
                {field:'status',  title: '状态', templet: statusTpl}
            ]],
            page: false// 开启分页
        });

        // 监听工具条按钮点击事件
        table.on('toolbar(appTable)', function(obj) {
            if (obj.event === 'add') {
                layer.open({
                    type: 1,
                    title: '新增记录',
                    content: $('#addPopup').html(),
                    area: ['600px', 'auto'],
                    success: function(layero, index) {
                        // 表单渲染
                        form.render(null, 'addForm');
                        // 表单提交监听
                        form.on('submit(addSubmit)', function(data) {
                            var formData = data.field;
                            // 发送请求保存数据
                            fetch('/chat/add',{
                                method:'POST',
                                headers:{'Content-Type':'application/json'},
                                body:JSON.stringify(formData)
                            }).then(res =>{
                                return res.json()
                            }).then(data =>{
                                table.reload();
                                layer.msg(data.message)
                            })
                            // 关闭弹窗
                            layer.close(index);
                            // 刷新表格
                            appTable.reload();
                            return false; // 阻止表单默认跳转
                        });
                    }
                });
            }else if (obj.event === 'delete') {
                var checkStatus = table.checkStatus('appTable');
                var data = checkStatus.data;
                if (data.length === 0) {
                    layer.msg('请先选择要删除的记录');
                    return;
                }
                // 弹出确认框
                layer.confirm('确认删除选中的记录？', function(index) {
                    // 删除选中的记录
                    var ids = data.map(function(item) {
                        return item.id;
                    });
                    // 发送删除请求
                    fetch('/chat/delete', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(ids)
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.code === 200) {
                                // 提示删除成功信息
                                layer.msg('删除成功');
                                // 刷新表格
                                appTable.reload();
                            } else {
                                // 提示删除失败信息
                                layer.msg('删除失败');
                            }
                        })
                        .catch(error => {
                            // 异常处理
                            console.error('Error:', error);
                            // 提示删除失败信息
                            layer.msg('删除失败，请重试');
                        });
                    // 关闭弹窗
                    layer.close(index);
                });
            }else if (obj.event === 'startSelected') {
                var checkStatus = table.checkStatus('appTable');
                var data = checkStatus.data;
                if (data.length === 0) {
                    layer.msg('请先选择要启动的记录');
                    return;
                }
                // 弹出确认框
                layer.confirm('确认启动的记录？', function(index) {
                    // 删除选中的记录
                    var ids = data.map(function(item) {
                        return item.id;
                    });
                    // 发送删除请求
                    fetch('/chat/start', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(ids)
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.code === 200) {
                            // 提示删除成功信息
                            layer.msg('启动成功');
                            // 刷新表格
                            appTable.reload();
                        } else {
                            // 提示删除失败信息
                            layer.msg('启动失败');
                        }
                    })
                    .catch(error => {
                        // 异常处理
                        console.error('Error:', error);
                        // 提示删除失败信息
                        layer.msg('删除失败，请重试');
                    });
                    // 关闭弹窗
                    layer.close(index);
                });
            }else if (obj.event === 'stopSelected') {
                var checkStatus = table.checkStatus('appTable');
                var data = checkStatus.data;
                if (data.length === 0) {
                    layer.msg('请先选择要停止的记录');
                    return;
                }
                // 删除选中的记录
                var ids = data.map(function(item) {
                    return item.id;
                });

                // 弹出确认框
                layer.confirm('确认停止的记录？', function(index) {
                    // 发送删除请求
                    fetch('/chat/stop', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(ids)
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.code === 200) {
                                // 提示删除成功信息
                                layer.msg('停止成功');
                                // 刷新表格
                                appTable.reload();
                            } else {
                                // 提示删除失败信息
                                layer.msg('停止失败');
                            }
                        })
                        .catch(error => {
                            // 异常处理
                            console.error('Error:', error);
                            // 提示删除失败信息
                            layer.msg('停止失败，请重试');
                        });
                    // 关闭弹窗
                    layer.close(index);
                });
            }
        });

        // 监听工具条按钮点击事件
        table.on('tool(appTable)', function(obj) {
            var data = obj.data;
            if (obj.event === 'startSelected') {
                var checkStatus = table.checkStatus('appTable');
                var data = checkStatus.data;
                if (data.length === 0) {
                    layer.msg('请先选择要启动的记录');
                    return;
                }
                // 弹出确认框
                layer.confirm('确认启动的记录？', function(index) {
                    // 删除选中的记录
                    var ids = data.map(function(item) {
                        return item.id;
                    });
                    // 发送删除请求
                    fetch('/chat/start', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(ids)
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.code === 200) {
                                // 提示删除成功信息
                                layer.msg('执行成功');
                                // 刷新表格
                                appTable.reload();
                            } else {
                                // 提示删除失败信息
                                layer.msg('执行失败');
                            }
                        })
                        .catch(error => {
                            // 异常处理
                            console.error('Error:', error);
                            // 提示删除失败信息
                            layer.msg('删除失败，请重试');
                        });
                    // 关闭弹窗
                    layer.close(index);
                });
            }else if (obj.event === 'stopSelected') {
                var checkStatus = table.checkStatus('appTable');
                var data = checkStatus.data;
                if (data.length === 0) {
                    layer.msg('请先选择要停止的记录');
                    return;
                }
                // 删除选中的记录
                var ids = data.map(function(item) {
                    return item.id;
                });

                // 弹出确认框
                layer.confirm('确认停止的记录？', function(index) {
                    // 发送删除请求
                    fetch('/chat/stop', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(ids)
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.code === 200) {
                                // 提示删除成功信息
                                layer.msg('执行完成');
                                // 刷新表格
                                appTable.reload();
                            } else {
                                // 提示删除失败信息
                                layer.msg('执行异常');
                            }
                        })
                        .catch(error => {
                            // 异常处理
                            console.error('Error:', error);
                            // 提示删除失败信息
                            layer.msg('停止失败，请重试');
                        });
                    // 关闭弹窗
                    layer.close(index);
                });
            }
        });

    });
</script>

</body>
</html>
